import './css/index.css';
import list from './js/data';

let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');

// 点击下一页
let currentIndex = 1; // 当前页面
let totalIndex = 0; // 总页面
let pageDate = 4; // 每个页面渲染的数据

// 1.拿到list中的数据截取之后渲染到li中

function renderFn() {
  ul.innerHTML = '';
  let newList1 = list.slice(
    (currentIndex - 1) * pageDate,
    currentIndex * pageDate
  );
  newList1.forEach((ele) => {
    // 2.给ul添加li
    ul.innerHTML += `
  <li>
  <img
  src=${ele.pic}
  alt=""
  />
  <p>${ele.name}</p>
  <p>城市: ${ele.city}</p>
  <p>地址: ${ele.address}</p>
  <p>价格: ${ele.price}</p>
  <p>演出时间: ${ele.showTime}</p>
  </li>
  `;
  });
  // 总页面
  totalIndex = Math.ceil(list.length / pageDate);
  totalBox.innerHTML = `${currentIndex} / ${totalIndex}`;
  if (currentIndex == '1') {
    prevBtn.classList.add('disable');
  } else {
    prevBtn.classList.remove('disable');
  }
  if (currentIndex == totalIndex) {
    nextBtn.classList.add('disable');
  } else {
    nextBtn.classList.remove('disable');
  }
}
renderFn();

nextBtn.addEventListener('click', () => {
  if (currentIndex == totalIndex) return;
  currentIndex++; //先运算后自增
  renderFn();
});
prevBtn.addEventListener('click', () => {
  if (currentIndex == 1) return;
  currentIndex--;
  renderFn();
});

// // selectBox 选择按钮
selectBox.addEventListener('change', () => {
  pageDate = selectBox.value;

  currentIndex = 1;

  renderFn();
});
